<template>
	<view class="xlk">
		<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
	</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-data-select",
		props: {

			// 列表数组
			range: {
				default: () => [],
				type: Array
			},
			// 选中的值
		},
		data() {
			return {
				value: 0,

			};
		},
		mounted() {},
		created() {
			this.value = this.val
			console.log(this.value);
			console.log(this.val);

		},
		methods: {
			...mapMutations('option', ['setVal']),
			change(e) {
				// console.log('e', e);
				this.value = e
				this.setVal(e)
				console.log(this.val);
			}
		},
		computed: {
			...mapState('option', ['val'])
		}
	}
</script>

<style lang="scss" scoped>
	.xlk {
		background-color: transparent;
		// width: 180px;
		margin: 0 auto;

		// 下拉框
		::v-deep .uni-select {
			border: 1px !important;
		}

		::v-deep .uni-stat__select {
			width: 117.97rpx !important;
			height: 17.19rpx !important;
			color: white;
		}

		::v-deep .uni-select__input-text {
			color: #D1DCE2;
			font-size: 8rpx;
		}

		::v-deep .uni-select__selector {
			border: 1px solid #0272e1;
			background-color: #0a2c7e;
		}

		::v-deep .uni-select__selector-item {
			height: 17.19rpx;
			line-height: 17.19rpx;
			font-size: 8rpx;
			border-bottom: 1px solid #76C1FF;
		}

		::v-deep .uni-select__selector-item:active {
			background-color: #0272e1;
		}

		::v-deep .uni-popper__arrow::after {
			border-bottom-color: #0a2c7e;
		}

		::v-deep .uni-icons {
			font-size: 8.81rpx !important;
		}

		::v-deep .uni-select__selector-scroll {
			max-height: 300rpx !important;
		}

		// ::v-deep .uni-stat__select {
		// 	color: white;

		// 	.uni-select {
		// 		border: none;

		// 		.uni-select__input-text {
		// 			color: white;
		// 		}

		// 		.uniui-top::before,
		// 		.uni-icons::before {
		// 			color: white;
		// 			background-color: transparent;
		// 		}
		// 	}
		// }
	}
</style>